<!--
 * @Descripttion: 
 * @Author: cjy
 * @version: 
 * @Date: 2020-09-16 14:51:11
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-04-12 14:01:51
-->
<template>
  <div class="vm">
    <h2 class="h-title">总览控件（鹰眼、小地图） OverviewMap</h2>
    <div id="map" class="map-x"></div>
  </div>
</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import { OSM,XYZ } from 'ol/source'
import * as control from 'ol/control'
import * as olInteraction from 'ol/interaction';

export default {
  name: 'OverviewMap',
  data () {
    return {
      map: null
    }
  },
  methods: {
    initMap () {

      //创建控件对象
      let overviewMapControl = new control.OverviewMap({
        className: 'ol-overviewmap ol-custom-overviewmap',
        layers: [
          new Tile({
            source: new XYZ({
              url: 'http://t0.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd',
              projection: "EPSG:4326",
            }),
          })
        ],
        collapseLabel: '\u00BB',
        label: '\u00AB',
        collapsed: false
      })

      this.map = new Map({
        target: 'map',
        controls: control.defaults({zoom:false}).extend([
          overviewMapControl
        ]),
        layers: [
          new Tile({
            source: new XYZ({
              url: 'http://t0.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd',
              projection: "EPSG:4326",
            }),
          })
        ],
        view: new View({
          projection: "EPSG:4326", 
          center: [114.064839, 22.548857],
          zoom: 6 
        })
      })

     
      
    }
  },
  mounted () {
    this.initMap()
    console.log(olInteraction)
  }
}
</script>

<style lang="scss" scoped>
  ::v-deep .ol-custom-overviewmap,
  ::v-deep .ol-custom-overviewmap.ol-uncollapsible {
    top: auto;
    right: auto;
    left: 0;
    bottom: 0;
  }

  ::v-deep .ol-custom-overviewmap:not(.ol-collapsed) {
    border: 2px solid rgb(41, 108, 110);
  }

  ::v-deep .ol-custom-overviewmap .ol-overviewmap-map {
    border: none;
    width: 300px;
    margin: 0;
  }

  ::v-deep .ol-custom-overviewmap .ol-overviewmap-box {
    border: 1px solid rgb(255, 0, 0);
  }

  ::v-deep .ol-custom-overviewmap:not(.ol-collapsed) button {
    top: auto;
    right: auto;
    left: 1px;
    bottom: 1px;
  }
  ::v-deep .ol-control button {
    background-color: rgb(59, 142, 153);
    outline: none;
}

  ::v-deep .ol-rotate {
    top: 170px;
    right: 0;
  }
</style>